<template>
     <!--图片上传-->
   <div class="upload-img-box" v-if="showUploadBox">
  <input type="file" hidden ref="imagesUp" @change="uploadImagesHandle"/>
  <div class="ui-up" @click="uploadImages">
    <el-icon
        class="ui-up-ico"
        @click="reload"
      > <component is="UploadFilled"></component></el-icon>
      上传图片
  </div>
  </div>

</template>

<script setup>
import { ref, onMounted,getCurrentInstance } from "vue";
const currentInstance = getCurrentInstance(); //获取main.js中挂载的实例
const { $api } = currentInstance.appContext.config.globalProperties;
import { UploadFilled } from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from "element-plus";
const pors = defineProps({
    folder: {
    type: String,
    default: 'admin',
  }, //文件夹名称
});
const showUploadBox = ref(true);//是否显示上传box

const emits = defineEmits(["uploadData"]); //定义一个或多个自定义按钮事件 传递到父组件
//图片上传
const imagesUp = ref(null);
const uploadImages = () =>{
  // console.log("上传");
  const imgInput = imagesUp.value;
  imgInput.click();
}
const uploadImagesHandle =(event) =>{
  // console.log(event,event.target.files[0]);
  let formdata = new FormData();
  formdata.append("file", event.target.files[0]); //转为文件流
  formdata.append("folder", pors.folder); //文件夹名称参数
  // console.log(formdata);
  $api.file_post("v1/login/upload/images", formdata).then((res) => {
    // console.log(res, "上传");
    if(res.code == 200){
        emits('uploadData',res.data);
    }else{
        ElMessage.error(res.msg);
    }
  });
}

// 将变量暴露出来
defineExpose({
  showUploadBox,
});

</script>

<style>
.upload-img-box{
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    padding:10px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.ui-up{
    flex: 2;
    border: 1px solid #f1f1f1;
    border-radius: 8px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #999;
}
.ui-up-ico{
    font-size: 40px;
}

</style>